//# sourceURL=http://uMapApp/UI/IconMenu/IconMenuSlideTabs
define([
    "mhjs/mhjs",
    "./IconMenuSlideTabMenu"
], function (
    mhjs,
    IconMenuSlideTabMenu
) {

    // var option = {
    //     "list": [
    //         {
    //             "title": "上行",
    //             "list" : [
    //                 {
    //                     "title": "第一车道",
    //                     "list" : [
    //                         {
    //                             "title": "60 KM/H"
    //                         },
    //                         {
    //                             "title": "80 KM/H"
    //                         },
    //                         {
    //                             "title": "100 KM/H"
    //                         },
    //                         {
    //                             "title": "120 KM/H"
    //                         }
    //                     ]
    //                 },
    //                 {
    //                     "title": "第二车道",
    //                     "list" : [
    //                         {
    //                             "title": "60 KM/H"
    //                         },
    //                         {
    //                             "title": "80 KM/H"
    //                         },
    //                         {
    //                             "title": "100 KM/H"
    //                         },
    //                         {
    //                             "title": "120 KM/H"
    //                         }
    //                     ]
    //                 }
    //             ]
    //         },
    //         {
    //             "title": "下行",
    //             "list" : [
    //                 {
    //                     "title": "第一车道",
    //                     "list" : [
    //                         {
    //                             "title": "60 KM/H"
    //                         },
    //                         {
    //                             "title": "80 KM/H"
    //                         },
    //                         {
    //                             "title": "100 KM/H"
    //                         },
    //                         {
    //                             "title": "120 KM/H"
    //                         }
    //                     ]
    //                 },
    //                 {
    //                     "title": "第二车道",
    //                     "list" : [
    //                         {
    //                             "title": "60 KM/H"
    //                         },
    //                         {
    //                             "title": "80 KM/H"
    //                         },
    //                         {
    //                             "title": "100 KM/H"
    //                         },
    //                         {
    //                             "title": "120 KM/H"
    //                         }
    //                     ]
    //                 }
    //             ]
    //         }
    //     ]
    // };

    function IconMenuSlideTabs(option) {
        var _this = this;

        _this.dom = $("<div class='iconMenuSlideTabs'></div>");
        _this.tabsContainer = $("<div class='iconMenuSlideTabsTabContainer'></div>");
        _this.menuContainer = $("<div class='iconMenuSlideTabsMenuContainer'></div>");

        _this.dom.append(_this.tabsContainer);
        _this.dom.append(_this.menuContainer);

        if (option) {

            if (option.list) {
                _this.list = option.list;
            }

        }

    }

    var _class = IconMenuSlideTabs;

    mhjs.Inherit(_class, mhjs.Div);

    Object.defineProperties(_class.prototype, {
        "list"  : {
            set: function (list) {

                if (list) {
                    var _this = this;
                    _this._tabs = [];
                    _this._menus = [];
                    _this.tabsContainer.empty();
                    _this.menuContainer.empty();

                    $.each(list, function (i, item) {
                        var tabDom = $("<div class='iconMenuSlideTabsTab'>" + item.title + "</div>");
                        var menuDom = $("<div class='iconMenuSlideTabsMenu'></div>");

                        _this.tabsContainer.append(tabDom);
                        _this._tabs.push(tabDom);

                        tabDom.click(function () {
                            _this.activeTab(i);
                        });

                        _this.menuContainer.append(menuDom);
                        _this._menus.push(menuDom);

                        $.each(item.list, function (i, subitem) {
                            var iconMenuSlideTabMenu = new IconMenuSlideTabMenu(subitem);
                            iconMenuSlideTabMenu.parent = _this;
                            menuDom.append(iconMenuSlideTabMenu.dom);
                        });

                    });

                    _this.activeTab(0);

                }

            }
        },
        "activeTab": {
            value: function (index) {
                var _this = this;
                $.each(_this._tabs, function (i, tab) {
                    _this._tabs[i].removeClass("activeTab");
                    _this._menus[i].removeClass("activeTab");
                });

                _this._tabs[index].addClass("activeTab");
                _this._menus[index].addClass("activeTab");

            }
        },
        "active"      : {
            value: function () {

                if (!this.isActive) {
                    this.dom.addClass("active");
                    this.isActive = true;
                }
            }
        },
        "inactive"    : {
            value: function () {
                if (this.isActive) {
                    this.dom.removeClass("active");
                    this.isActive = false;
                }
            }
        },
        "toggleActive": {
            value: function () {
                if (this.isActive) {
                    this.inactive();
                } else {
                    this.active();
                }

            }
        },
        "checkActive" : {
            value: function () {

                if (this._slide.dom.find(".active").length > 0) {
                    this.active();
                } else {
                    this.inactive();
                }

            }
        }
    });

    return _class;


});